<!DOCTYPE html>
<html>
<head>
	<title>test_hover</title>
	<style type="text/css">
		#nav, #nav ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		#nav a {
			display: block;
			width: 10em;
		}
		#nav li {
			float: left;
			width: 10em;
		}
		#nav li ul {
			position: absolute;
			width: 10em;
			left: -999em;
		}
		#nav li:hover ul {
			left: auto;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="default.css">
	<script type="text/javascript" src="js/util.js"></script>
</head>
<body>
	<ul id="nav">
		<li>
			<a href="#" onmouseover="setResult('Dropdown 1');">Dropdown 1</a>
			<ul>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 1 - Item A');">
						Item A
					</a>
				</li>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 1 - Item B');">
						Item B
					</a>
				</li>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 1 - Item C');">
						Item C
					</a>
				</li>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 1 - Item D');">
						Item D
					</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" onmouseover="setResult('Dropdown 2');"
			   onmouseout="setResult('');">Dropdown 2</a>
			<ul>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 2 - Item A');">
						Item A
					</a>
				</li>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 2 - Item B');">
						Item B
					</a>
				</li>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 2 - Item C');">
						Item C
					</a>
				</li>
				<li>
					<a href="#" onmouseover="setResult('Dropdown 2 - Item D');">
						Item D
					</a>
				</li>
			</ul>
		</li>
	</ul>
	<p id="result" style="position: absolute; top: 100px;"></p>
</body>
</html>